<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS面向对象，动态添加标签页</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.box {
				width: 800px;
				height: 250px;
				border: 2px solid darkcyan;
				margin: 200px auto;
			}

			li {
				list-style-type: none;
				float: left;
				width: 80px;
				line-height: 40px;
				text-align: center;
				border-right: 1px solid darkgray;
				position: relative;
			}

			.current {
				border-bottom: 1px solid white;
			}

			ul {
				width: 100%;
				height: 40px;
				border-bottom: 1px solid darkgray;
			}

			button {
				float: right;
				width: 40px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				position: relative;
				top: -41px;
				font-size: 20px;
				border-width: 0px;
			}

			.content {
				width: 100%;
				height: 200px;
				margin-top: 5px;
			}

			p {
				display: none;
			}

			.txt {
				display: block;
			}

			li,
			button {
				cursor: pointer;
			}

			.top li span:last-child {
				display: block;
				width: 12px;
				height: 12px;
				line-height: 12px;
				text-align: center;
				border-radius: 50%;
				position: absolute;
				right: 0;
				top: 0;
				background-color: #A9A9A9;
			}

			input {
				width: 80%;
				line-height: 25px;
				outline: 0;
				border: 1px solid darkgray;
				box-shadow: 1px 1px 5px 1px darkgray;
			}
		</style>
	</head>
	<body>
		<div class='box' id='tab'>
			<div class='top'>
				<ul>
					<li class='current'><span>测试一</span><span class='gb'>✘</span></li>
					<li><span>测试二</span><span class='gb'>✘</span></li>
					<li><span>测试三</span><span class='gb'>✘</span></li>
				</ul>
				<button class='add'>+</button>
			</div>
			<div class='content'>
				<p class='txt'>内容区域1</p>
				<p>内容区域2</p>
				<p>内容区域3</p>
			</div>
		</div>
		<script>
			var that;
			class Tab {
				constructor(id) {
					that = this;
					this.main = document.querySelector(id);
					this.add = this.main.querySelector('.add');
					this.ul = this.main.querySelector('ul');
					this.content = this.main.querySelector('.content');
					this.init();
				}
				// 初始化操作,让相关的元素绑定事件				
				init() {
					this.updateNode();
					this.add.onclick = this.addTab;
					for (var i = 0; i < this.lis.length; i++) {
						this.lis[i].index = i;
						this.lis[i].onclick = this.toggleTab;
						this.remove[i].onclick = this.removeTab;
						this.spans[i].ondblclick = this.editTab;
						this.ps[i].ondblclick = this.editTab;
					}
				}
				// 动态添加元素，需重新获取对应的元素
				updateNode() {
					this.lis = this.main.querySelectorAll('li');
					this.ps = this.main.querySelectorAll('p');
					this.remove = this.main.querySelectorAll('.gb');
					this.spans = this.main.querySelectorAll('.top li span:first-child');
				}
				// 切换功能				
				toggleTab() {
					// console.log(this.index);
					that.clearClass();
					this.className = 'current';
					that.ps[this.index].className = 'txt';
				}
				clearClass() {
					for (var i = 0; i < this.lis.length; i++) {
						this.lis[i].className = '';
						this.ps[i].className = '';
					}
				}
				// 添加功能				
				addTab() {
					that.clearClass();
					// var li = document.createElement('li');
					// li.innerHTML = '<li>新标签</li>';
					// that.ul.appendChild(li);
					var random = Math.random();
					var li = '<li class="current"><span>新标签</span><span class="gb">✘</span></li>';
					var p = '<p class="txt">测试' + random + '</p>';
					that.ul.insertAdjacentHTML('beforeend', li);
					that.content.insertAdjacentHTML('beforeend', p);
					that.init();
				}
				// 删除功能				
				removeTab(e) {
					e.stopPropagation();
					var index = this.parentNode.index;
					that.lis[index].remove();
					that.ps[index].remove();
					that.init();
					// 当删除的不是当前选中状态的li时,让它的选中状态保持不变
					if (document.querySelector('.current')) return;
					// 当删除了当前选中状态的li时,让它前一个li处于选中状态
					index--;
					//手动调用点击事件，&&判断，如果前面的li存在，就执行	
					that.lis[index] && that.lis[index].click();
				}
				// 修改功能				
				editTab() {
					var str = this.innerHTML;
					// 双击事件，ondblclick，禁止选中文字
					window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
					this.innerHTML = '<input type="text" maxlength="4"/>';
					var input = this.children[0];
					input.value = str;
					input.select(); //双击文本框里面的内容处于选中状态
					// 当失去焦点的时候文本框里面的内容直接给sapn
					input.onblur = function() {
						this.parentNode.innerHTML = this.value;
					};
					input.onkeyup = function(e) {
						if (e.keyCode == 13) {
							// 手动调用鼠标失去焦点事件,不需要鼠标离开操作
							this.blur();
						}
					}
				}
			}
			new Tab('#tab');
		</script>
	</body>
</html>
